

import React, {useEffect} from 'react';
import Images from '../images/images';
import screen from '../utils/screen';
import {ImageBackground, StyleSheet, Text, View,Image} from 'react-native';
import TouchableView from './touchableView';


const EMOTION_GIF_NAME = {
    '[位置]':'loc',
    '[海拔]':'alt',
    '[气压]':'pressure',
    '[设备]':'device',

}

const EMOTION_PATH = {
    "loc": Images.loc_icon,
    "alt":Images.alt_icon,
    "pressure":Images.pressure,
    "device":Images.device_icon,
}


const TemplateItem = ({message,onPress})=>{

    useEffect(()=>{
        stringToContentArray(message)
    },[message])

    const stringToContentArray = (text)=>{

        var regex =new RegExp('\\[[a-zA-Z0-9\\/\\u4e00-\\u9fa5]+\\]','g');
        var regArray = text.match(regex)
        const contentArray = []
        if(regArray === null){
            contentArray.push({"Content":text})
            return contentArray
        }
        var indexArray = [];
        var pos = text.indexOf(regArray[0]);//头
        for (let i = 1; i < regArray.length; i++) {
            indexArray.push(pos);
            pos = text.indexOf(regArray[i],pos + 1);
        }
        indexArray.push(pos);//尾

        // console.log("indexArray = ",indexArray);
        for (let i=0; i<indexArray.length; i++) {
            if (indexArray[i] === 0) {//一开始就是表情
                contentArray.push({"Resources" : EMOTION_GIF_NAME[regArray[i]],attr: {Type:"0"}});
            } else {
                if (i === 0) {
                    contentArray.push({"Content" : text.substr(0,indexArray[i])});
                } else {
                    if (indexArray[i] - indexArray[i-1] - regArray[i-1].length > 0) {//两个表情相邻，中间不加content
                        contentArray.push({"Content" : text.substr(indexArray[i-1] + regArray[i-1].length,indexArray[i] - indexArray[i-1] - regArray[i-1].length)});
                    }
                }
                contentArray.push({"Resources" : EMOTION_GIF_NAME[regArray[i]],attr: {Type:"0"}});
            }
        }

        let lastLocation = indexArray[indexArray.length - 1] + regArray[regArray.length - 1].length;
        if (text.length > lastLocation) {
            contentArray.push({"Content": text.substr(lastLocation,text.length - lastLocation)});
        }
        // console.log(contentArray);
        return contentArray;


    }


    return (
        <TouchableView
            style={styles.moduleView}
            onPress={onPress}
        >
            <Text>
                {
                    stringToContentArray(message).map((content, i) => {
                        if (content["Content"] != null || !EMOTION_PATH[content["Resources"].toLowerCase()]) {//文本
                            return (
                                <Text
                                    key={i}
                                    style={[{textAlign:'left'},styles.name]}
                                    adjustsFontSizeToFit={true}
                                    minimumFontScale={1.0}
                                >
                                    {content["Content"] != null? content["Content"] : content["Resources"]}
                                </Text>
                            );
                        } else if (content["Resources"] != null) {//emoji
                            let w = screen.PIXEL_30;
                            return (
                                <Image
                                    key={i}
                                    style={[{ "width": w, "height": w }]}
                                    source={EMOTION_PATH[content["Resources"].toLowerCase()]}
                                >
                                </Image>
                            );
                        }
                    })
                }
            </Text>

            {/*<Text style={styles.name}>{message}</Text>*/}


        </TouchableView>
    )
}

export default TemplateItem

const styles = StyleSheet.create({
    moduleView: {
        backgroundColor: '#fff', borderRadius: screen.PIXEL_20, minHeight: screen.PIXEL_100,flexDirection:'row',
        paddingHorizontal: screen.PIXEL_30, marginBottom: screen.PIXEL_40, alignItems: 'center'
    },
    name:{
        color:'#333',fontSize:15,fontWeight:'500'
    },
})
